import { Tag } from 'antd'
import { RightOutlined } from '@ant-design/icons'
import React from 'react'
import { useNavigate } from 'react-router-dom'

const Status = ({ value, orderId }) => {
  const navigate = useNavigate()

  const couponStatus = [
    {
      value: -1,
      text: '已过期',
      color: '#E4E4E4',
      textColor: '#333',
    },
    {
      value: -2,
      text: '已作废',
      color: '#E4E4E4',
      textColor: '#333',
    },
    {
      value: 1,
      text: '未使用',
      color: '#7FB57A',
    },
    {
      value: 2,
      text: '已使用',
      color: '#61A6DB',
      showArrow: true,
    },
  ]
  const item = couponStatus.find((item) => item.value === value)
  if (!item) return null

  const handleClick = (e) => {
    if (orderId && item.showArrow) {
      e.stopPropagation()
      navigate(`/page/order/wash/detail/view?id=${orderId}`)
    }
  }

  return (
    <Tag
      color={item.color}
      style={
        item.showArrow && orderId
          ? {
              cursor: 'pointer',
              ...(item.textColor ? { color: item.textColor } : {}),
            }
          : item.textColor
          ? { color: item.textColor }
          : {}
      }
      onClick={item.showArrow && orderId ? handleClick : undefined}
    >
      <span
        style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
      >
        {item.text}
        {item.showArrow && orderId && (
          <RightOutlined
            style={{
              color: '#fff',
              fontSize: '12px',
            }}
          />
        )}
      </span>
    </Tag>
  )
}
export default Status
